<template>
  <div class="user">
    <div class="userimg">
      <img class="bgc" :src="avatarUrl" alt />
    </div>
    <div class="userinfo">
      <div class="username">
        <div class="user-right">
          <p class="name">{{ nickname }}</p>
          <i v-if="sex == 1" class="man"></i>
          <i v-if="sex == 2" class="woman"></i>
          <p class="level">11</p>
        </div>
        <div class="user-left">
          <div class="but">
            <img src="../../assets/em.png" />
            发私信
          </div>
          <div class="but">
            <img src="../../assets/guan.png" />
            关注
          </div>
        </div>
      </div>
      <div class="users">
        <div>
          <p>1</p>
          <p class="info">动态</p>
        </div>
        <div>
          <p>6</p>
          <p class="info">关注</p>
        </div>
        <div>
          <p>4</p>
          <p class="info">粉丝</p>
        </div>
      </div>
      <div class="users1">
        <p>社交网络：未绑定</p>
        <p>所在地区：中国大陆</p>
        <p>个人介绍:{{ signature || "暂无介绍" }}</p>
      </div>
    </div>
    <div class="content">
      <div class="tetle">歌单（{{ this.num }}）</div>
      <div class="car">
        <Car :playlist="myplaylist" width="140px" height="180px" />
      </div>
    </div>
  </div>
</template>

<script>
import carList from "../find/catList";
export default {
  data() {
    return {
      sex: 0,
      myplaylist: [],
      signature: "",
      avatarUrl: "",
      nickname: "",
      load: "",
      num: "",
    };
  },
  components: {
    Car: carList,
  },
  mounted() {
    let uid = this.$route.params.id;
    this.load = this.$loading.show();
    this.$api.myplaylist({ uid }).then((res) => {
      let a = [];
      res.map((item) => {
        let b = {
          id: item.id,
          playCount: item.playCount,
          name: item.name,
          coverImgUrl: item.coverImgUrl,
        };
        a.push(b);
      });
      this.nickname = res[0].creator.nickname;
      this.avatarUrl = res[0].creator.avatarUrl;
      this.signature = res[0].creator.signature;
      this.myplaylist = a;
      this.sex = res[0].creator.gender;
      this.num = res.length - 1;
      this.load.hide();
    });
  },
};
</script>

<style lang="less" scoped>
.user {
  display: flex;
  flex-wrap: wrap;
  float: left;
  height: inherit;
  overflow: auto;
  .userimg {
    margin: 20px 30px;
    height: 200px;
    img {
      width: 20%;
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      border: 1px solid #e5e5e5;
    }
  }
  .content {
    width: 800px;
    margin-top: 20px;

    .tetle {
      font-size: 12px;
      padding: 10px 20px;
      border-top: #e1e1e1 solid 1px;
      border-bottom: #e1e1e1 solid 1px;
    }
    .car {
      width: 785px;
      margin-left: 15px;
      margin-left: 20px;
      overflow-x: hidden;
    }
  }

  .userinfo {
    margin: 25px 0;
    width: 545px;
    height: 200px;

    .users {
      display: flex;
      align-items: center;
      div {
        width: 70px;
        border-right: #e1e1e1 1px solid;
        margin-left: 18px;

        &:last-child {
          border: none;
        }
      }

      .info {
        font-size: 12px;
        color: #666;
      }
    }
    .users1 {
      p {
        font-size: 12px;
        color: #333;
        margin: 10px 0 0 0;
        &:first-child {
          margin-top: 20px;
        }
      }
    }
    .username {
      display: flex;
      position: relative;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid #e0e0e0;

      .user-right {
        display: flex;

        .name {
          font-size: 22px;
          font-weight: normal;
          line-height: 30px;
        }

        i {
          width: 20px;
          height: 20px;
          display: inline-block;
          overflow: hidden;
          vertical-align: middle;
          background: url("../../assets/icon.png") no-repeat 0 9999px;
          margin: 5px 0 0 8px;
        }

        .man {
          background-position: -41px -57px;
        }

        .woman {
          background-position: -41px -27px;
        }

        .level {
          margin: 5px 0 0 10px;
          background: url("../../assets/icon2.png") no-repeat 0 9999px;
          display: inline-block;
          height: 19px;
          width: 65px;
          overflow: hidden;
          padding-left: 29px;
          line-height: 21px;
          color: #e03a24;
          font-size: 14px;
          font-weight: bold;
          font-style: italic;
          background-position: -135px -190px;
        }
      }

      .user-left {
        display: flex;
        margin-right: 30px;

        div {
          margin-right: 10px;
          border: 1px solid #e1e1e2;
          padding: 0px 10px;
          font-size: 12px;
          border-radius: 5px;
          color: #333;
          display: flex;
          align-items: center;

          &:hover {
            background-color: #f5f5f7;
          }

          img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
